<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar height="50" :border-bottom="false" title-size="36" title="评价"></u-navbar>

        <u-gap height="20"></u-gap>
      </view>
      <view class="comment-area">
        <view class="comment-box" @click="routeTo" v-for="(item, index) in itemList" :key="index">
          <view class="dis-flex flex-y-center flex-y-between">
            <view class="comment-info dis-flex flex-y-center">
              <u-avatar style="margin-right: 10rpx" src="" size="70"></u-avatar>
              <view class="info-left-username">
                <view class="name">用户</view>
                <view class="date">2024-01-05</view>
              </view>
            </view>
            <view class="comment-star dis-flex">
              <text class="comment-star-text">非常满意</text>
              <view class="">
                <u-rate
                  v-model="item.count"
                  active-color="#FBC258"
                  inactive-color="#CCCCCC"
                  size="31"
                  gutter="10"
                ></u-rate>
              </view>
            </view>
          </view>
          <view class="">
            <view class="comment-content">
              产品非常好，非常喜欢。产品非常好，非常喜欢。产品非常好，非常喜欢。产品非常好，非常喜欢。产品非常好，非常喜欢。
            </view>
            <view class="comment-img">
              <u-image
                class="image"
                src=""
                mode=""
                border-radius="8"
                width="216rpx"
                height="145rpx"
              ></u-image>
              <u-image
                class="image"
                src=""
                mode=""
                border-radius="8"
                width="216rpx"
                height="145rpx"
              ></u-image>
              <u-image
                class="image"
                src=""
                mode=""
                border-radius="8"
                width="216rpx"
                height="145rpx"
              ></u-image>
              <!-- 	<u-image class="image" src="" mode="" border-radius="8" width="216rpx"
								height="145rpx"></u-image> -->
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      count: 3,
      itemList: [
        {
          count: 3
        },
        {
          count: 3
        }
      ]
    }
  },
  methods: {
    queryList() {}
  }
}
</script>

<style lang="scss">
.comment-top {
  width: 750rpx;
  height: 150rpx;
  background: #ffffff;
  padding: 20rpx 0 20rpx 0;
  display: flex;
  flex-flow: column;
  justify-content: space-between;

  .count {
    align-items: center;

    .count-l {
      width: 180rpx;
      text-align: center;
    }

    .count-r {
      .type {
        background: #ffffff;
        border-radius: 6rpx;
        border: 1px solid #e6e6e6;
        padding: 4rpx 10rpx;
        font-size: 20rpx;
        color: #666666;
        margin-right: 20rpx;
      }

      .checked {
        background: #f5e7e6;
        color: #fa453c;
      }
    }

    .star {
      font-weight: 600;
      font-size: 48rpx;
      color: #333333;
    }

    .des {
      font-size: 28rpx;
      color: #666666;
    }
  }
}

.comment-area {
  position: relative;
}

.comment-box {
  padding: 20rpx;
  background-color: #fff;

  .comment-info {
    overflow: auto;
    // margin: 15rpx 0;

    .comment-info-left {
    }

    .info-left-username {
      .name {
        font-size: 24rpx;
        color: #333333;
      }

      .date {
        font-size: 20rpx;
        color: #999999;
      }
    }
  }

  .comment-star {
    display: flex;
    align-items: flex-end;
    flex-flow: column;

    .comment-star-text {
      font-size: 24rpx;
      color: #333333;
      margin-left: 10rpx;
    }
  }

  .comment-content {
    margin-top: 20rpx;
    font-size: 22rpx;
    color: #333333;
    line-height: 36rpx;
  }

  .comment-img {
    margin-top: 10rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .image {
      margin-top: 10rpx;
    }
  }
}
</style>
